<template >
    
    <div class="bigconn" >
        <div class="favorites-head" >
            <van-nav-bar
            title="收货地址"
            left-text=""
            right-text="新增地址"
            left-arrow
            @click-left="onClickLeft"
            @click-right="goat"

          />
        </div>
        <div class="TheGoods"  >
            <div class="TheGoods-DefaultSite" >
                <div class="TheGoods-DefaultSite-box" >
                    <div class="TheGoods-DefaultSite-name"  >
                        {{ DefaultAddress.name}}
                    </div>
                    <div class="TheGoods-DefaultSite-MobilePhone" >
                        {{ DefaultAddress.dianhua}}
                    </div>
                    <span class="TheGoods-DefaultSite-site" >
                        <span style="font-weight: 600" > 默认</span>
                        
                        <span>{{DefaultAddress.province}}</span>
                        <span>{{DefaultAddress.city}}</span>
                        <span>{{DefaultAddress.area}}</span>
                       <span>{{DefaultAddress.DetailedAddress}}</span>
                    </span>
                </div>
                <div class="TheGoods-DefaultSite-compile" >
                    编辑
                </div>
            </div>
       
            <div class="TheGoods-maybe" >
                <div>
  
                </div>
                <div class="TheGoods-maybe-b" v-for="(item,index) in goodsaddress" :key="index"  >
                    <div class="TheGoods-maybe-box" >
                        <div class="TheGoods-maybe-name"  >
                            {{item.name}}
                        </div>
                        <div class="TheGoods-maybe-MobilePhone" >
                            {{ item.dianhua}}
                        </div>
                        <span class="TheGoods-maybe-site" >
                            <span>{{item.province}}</span>
                            <span>{{item.city}}</span>
                            <span>{{item.area}}</span>
                           <span>{{item.DetailedAddress}}</span>
                        </span>
                    </div>
                    <div @click="JumpEdit(index)" class="TheGoods-maybe-compile" >
                        编辑
                    </div>
                </div>
        
         
          
            </div>
       
        </div>
    
    </div>
</template>
<script setup lang="ts">
import {onMounted,ref} from 'vue'
import { getaddress} from '@/api/my1'
import {useRouter,useRoute} from 'vue-router'
// import "amfe-flexible/index.js";

let router =useRouter()
let route=useRoute()
let goodsaddress=ref([])
let  DefaultAddress=ref([])
const onClickLeft = () => history.back();

//接收地址数据
onMounted(function(){
    getaddress()
    .then(res=>{
        DefaultAddress.value=res.data.title
        goodsaddress.value=res.data.data
        
        
    })
})
//跳转编辑
let JumpEdit=function(a){
    console.log(goodsaddress.value[a]);
   
    router.push({name:'edit',query:goodsaddress.value[a]})
}
let goat=function(){
    router.push('/EditAddress')

}
</script>
<style>

.favorites-head {
    width: 100%;
    background: #eae9e5;
}

 .bigconn .van-nav-bar__title {
    font-weight: 700 !important;
    font-size: .4rem !important;
}
.bigconn .van-ellipsis{
    height: 10vw;
    line-height: 10vw;
}
 .bigconn .van-nav-bar__content {
    background: #eae9e5 !important;
    border: 0;
    height: 10vw !important;
}

 .bigconn .van-icon {
    color: #c5a28f !important;
}

 .bigconn .van-nav-bar__text {
    color: #c1ab96 !important;
    font-size: 1vw !important;
}
.TheGoods{
    width: 100%;
    padding: 4vw;
    box-sizing: border-box;
    margin-top: 15vw;
}
.TheGoods-DefaultSite{
    width: 100%;
    height: 20vw;
    box-shadow:0vw 0vw 1.2vw .1vw #cacaca;
    border-radius:2vw ;
    background: #c1ab96;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5vw;

}

.TheGoods-DefaultSite-box{
    width:80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

}
.TheGoods-DefaultSite-name{
    padding: 2vw;
    font-size: 4vw;
    font-weight: 600;
    color: #fff;
    height: 5vw;
}
.TheGoods-DefaultSite-MobilePhone{
    color: #fff;
    font-size: 3vw;
    height: 5vw;
    padding: 3vw 0 0vw 3vw;
}
.TheGoods-DefaultSite-site{
    width: 100%; 
    height: 11vw;
   font-size: 3.3vw;
   color:#fff;
   padding-left: 2vw;
}
.TheGoods-DefaultSite-site span{
    padding-right: 2vw;
    word-wrap:break-word;word-break:break-all;overflow:hidden;


}
.TheGoods-DefaultSite-compile{
    box-sizing: border-box;
    padding-left: 3vw;
    margin: 3vw 0 3vw 3vw;
    border-left:1px dashed #dedede ;
    line-height: 13vw;
    color:#fff;
   font-size: 3.3vw;
   border-left-style: dashed;


}
.TheGoods-maybe{
    width: 100%;
    box-shadow:0vw 0vw 1.2vw .1vw #cacaca;
    border-radius:2vw ;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
  
  }
  .TheGoods-maybe-b{
    width: 100%;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    margin: 0  2vw;
    border-bottom:1px solid #dedede ;
    box-sizing: border-box;
}
  .TheGoods-maybe-box{
    width:80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  
  }
  .TheGoods-maybe-name{
    padding:  2vw 2vw 0 0    ;
    font-size: 4vw;
    font-weight: 600;
    color: #000;
    height: 5vw;
  }
  .TheGoods-maybe-MobilePhone{
    color: #000;
    font-size: 3vw;

    height: 5vw;
    padding: 3vw 0 0vw 3vw;
  }
  .TheGoods-maybe-site{
    width: 100%; 
    height: 11vw;
   font-size: 3.3vw;
   color:#000;
   padding-left: 2vw;
  }
  .TheGoods-maybe-site span{
    padding-right: 2vw;
    word-wrap:break-word;word-break:break-all;overflow:hidden;
  
  
  }
  .TheGoods-maybe-compile{
    box-sizing: border-box;
    padding-left: 3vw;
    margin: 3vw 0 3vw 3vw;
    border-left:1px dashed #dedede ;
    line-height: 13vw;
    color:#000;
   font-size: 3.3vw;
   border-left-style: dashed;
  
  
  }

</style>